<script setup lang="ts">
import pageWrap from "@/components/pageWrap/index.vue";
import { Collapse, CollapsePanel, message } from "ant-design-vue";
import { ref } from "vue";
import { Icon } from "@iconify/vue";
import CodeMirror from "@/components/CodeMirror/index.vue";
import copyJson from './components/copy/index.json'
import QueryJson from './components/query/index.json'
import FullscreenJson from './components/fullscreen/index.json'
import ImageJson from './components/image/index.json'
import DarkJson from './components/dark/index.json'
import Copy from "./components/copy/index.vue";
import Query from "./components/query/index.vue";
import Fullscreen from "./components/fullscreen/index.vue";
import Image from './components/image/index.vue'
import Dark from './components/dark/index.vue'
// 折叠面板
const activeKey = ref();
const codeRef = ref();


const handlePath = (type: string) => {
  switch (type) {
    case "copy":
      codeRef.value.open("一键复制", copyJson);
      break;
    case "query":
      codeRef.value.open("获取url中或者设置query参数", QueryJson);
      break;
    case "fullscreen":
      codeRef.value.open("全屏", FullscreenJson);
      break;
    case "image":
      codeRef.value.open("响应式加载图像", ImageJson);
      break;
    case "dark":
      codeRef.value.open("暗黑模式", DarkJson);
      break;
    default:
      message.error("暂无代码示例");
      break;
  }
};
</script>
<template>
  <pageWrap headerContent>
    <template v-slot:header>
      <div class="text-2xl h-12 pl-5 pt-2 font-bold">浏览器相关功能</div>
      <div class="pl-5">根据浏览器能力做出对应的功能</div>
    </template>
    <div class="overflow-y-auto pb-20">
      <div>
        <div class="bg-white p-2">
          <Collapse v-model:activeKey="activeKey">
            <CollapsePanel key="1" header="一键复制">
              <Copy />
              <template #extra>
                <Icon
                  icon="gravity-ui:code"
                  @click.stop="handlePath('copy')"
              /></template>
            </CollapsePanel>
            <CollapsePanel key="2" header="获取url中或者设置query参数">
              <Query />
              <template #extra>
                <Icon
                  icon="gravity-ui:code"
                  @click.stop="handlePath('query')"
              /></template>
            </CollapsePanel>
            <CollapsePanel key="3" header="全屏">
              <Fullscreen />
              <template #extra>
                <Icon
                  icon="gravity-ui:code"
                  @click.stop="handlePath('fullscreen')"
              /></template>
            </CollapsePanel>
            <CollapsePanel key="4" header="响应式加载图像">
              <Image />
              <template #extra>
                <Icon
                  icon="gravity-ui:code"
                  @click.stop="handlePath('image')"
              /></template>
            </CollapsePanel>
            <CollapsePanel key="5" header="暗黑模式">
              <Dark />
              <template #extra>
                <Icon
                  icon="gravity-ui:code"
                  @click.stop="handlePath('dark')"
              /></template>
            </CollapsePanel>
            </Collapse>
        </div>
      </div>
    </div>
    <CodeMirror ref="codeRef" />
  </pageWrap>
</template>
<style scoped lang="less"></style>
